<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="APP设置" name="f">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="APP名字">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <upload :label="'APP图标'" :old_path="form.logo" @upload-event="success"></upload>

          <el-form-item label="APP请求URL">
            <el-input v-model="form.url"></el-input>

          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('app_set')">确定</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="短信设置" name="first">
        <el-form ref="sms" :model="sms" label-width="120px" :rules="rules.sms">
          <el-form-item label="平台名字" prop="name">
            <el-input v-model="sms.name" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="短信接口" prop="api">
            <el-input v-model="sms.api"></el-input>
          </el-form-item>

          <el-form-item label="账号" prop="user">
            <el-input v-model="sms.user"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="pass">
            <el-input v-model="sms.pass" type="password"></el-input>
          </el-form-item>

          <el-form-item label="短信签名" prop="sign">
            <el-input v-model="sms.sign"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('sms')">确定</el-button>
            <el-button @click="testSms">测试</el-button>
          </el-form-item>
        </el-form>

        <el-dialog title="测试" :visible.sync="dialogFormVisible">

          <el-form ref="dataForm"  label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
            <el-form-item label="手机号" prop="username">
              <el-input v-model="sms.phone" />
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="testSmsTo">
              发送
            </el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="图片上传" name="second">
        <el-form  label-width="200px" >

          <el-form-item label="平台选择" prop="name">
            <!--            <el-radio v-model="image.type" label="1" @change="upload_type">本地</el-radio>-->
            <el-radio v-model="image.type" label="2" @change="upload_type">七牛云</el-radio>
          </el-form-item>

          <div v-if="image.type == '2'">
            <el-form-item label="平台名字" prop="user">
              <el-input v-model="image.name"></el-input>
            </el-form-item>

            <el-form-item label="平台ACCESS_KEY" prop="user">
              <el-input v-model="image.access_key"></el-input>
            </el-form-item>

            <el-form-item label="平台私钥SECRET_KEY" prop="user">
              <el-input v-model="image.secret_key"></el-input>
            </el-form-item>

            <el-form-item label="平台BUCKET" prop="user">
              <el-input v-model="image.bucket"></el-input>
            </el-form-item>

            <el-form-item label="平台DOMAIN" prop="user">
              <el-input v-model="image.domain"></el-input>
            </el-form-item>

          </div>

          <el-form-item>
            <el-button type="primary" @click="submitForm('image')">确定</el-button>
          </el-form-item>
        </el-form>

      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
    import Upload from '@/components/Upload'
    import { sms,gets,testSms,image,appSet } from '@/api/system'

    export default {
        components: { Upload },
        data() {
            return {
                dialogFormVisible:false,
                form: {
                    name:'',
                    logo: '',
                    url:''
                },
                sms:{
                    name:'短信宝',
                    api:'http://www.smsbao.com/',
                    user:'',
                    pass:'',
                    sign:'',
                    phone:''
                },
                image:{
                    type:'2', //  1本地上传 2七牛云上传
                    name:'七牛云',
                    access_key:'',
                    secret_key:'',
                    bucket:'',
                    domain:''
                },
                activeName: 'f',
                rules:{
                    sms:{
                        name: [
                            { required: true, message: '请输入短信平台名字', trigger: 'blur' },
                        ],
                        api: [
                            { required: true, message: '请选择接口请求地址', trigger: 'blur' }
                        ],
                        user: [
                            { required: true, message: '请输入平台账号', trigger: 'blur' }
                        ],
                        pass: [
                            { required: true, message: '请输入平台密码', trigger: 'blur' }
                        ],
                        sign: [
                            { required: true, message: '请输入短信签名', trigger: 'blur' }
                        ]
                    }
                }
            };
        },
        created() {
            gets().then(response => {
                const data =response.data;
                this.sms = data.sms;
                this.image = data.image;
                this.form = data.app_set;
            })
        },
        methods: {

            //  图片上传
            success(value){
                this.form.logo = value;
            },
            upload_type(value)
            {

            },
            testSms(){
                this.dialogFormVisible = true;
                this.sms.phone = '';
            },

            testSmsTo(){
                const phone = this.sms.phone;
                if (!phone){
                    this.$message({
                        message: '请输入手机号码',
                        type: 'warning'
                    });
                    return false;
                }

                testSms({phone: phone}).then(response => {
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                });

            },

            submitForm(formName) {
                if (formName == 'image'){
                    const data = this.image;

                    image(data).then(() => {
                        this.$notify({
                            title: '',
                            message: '设置成功',
                            type: 'success',
                            duration: 2000
                        })
                    })

                }else if(formName == 'app_set') {
                    const data = this.form;

                    appSet(data).then(() => {
                        this.$notify({
                            title: '',
                            message: '设置成功',
                            type: 'success',
                            duration: 2000
                        })
                    })
                }else {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (formName == 'sms'){
                                const data = this.sms;
                                sms(data).then(() => {
                                    this.$notify({
                                        title: '',
                                        message: '设置成功',
                                        type: 'success',
                                        duration: 2000
                                    })
                                })
                            }


                        } else {
                            return false;
                        }
                    });
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleClick(tab, event) {
                // console.log(tab, event);
            }
        }
    };
</script>
